/* 
useEffect副作用
在使用效果中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作
比如在使用效果中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用


说明:清除副作用的函数最常见的执行时机是在组件卸载时自动执行
*/

import { useEffect, useState } from "react";

const Son = () => {
	useEffect(() => {
		const timer =  setInterval(() => {
			console.log("定时器执行中");
		}, 1000);
		/* 
		此时发现子组件被卸载 但是定时器还在执行
		解决： return一个函数
		*/
		return () => {
			// 清除副作用 执行时机：组件被卸载时
			clearInterval(timer)
		}


	}, []);
	return <div>我是Son组件</div>;
};

function App() {
	const [show, setShow] = useState(true);

	return (
		<div className="app">
			{show && <Son />}
			<button onClick={() => setShow(false)}> 卸载子组件</button>
		</div>
	);
}

export default App;
